<template>
  <div>
    <el-popover placement="bottom" trigger="click">
      <table class="login-table" style="text-align: center;">
        <tr>
          <td>登录后你可以:</td>
        </tr>
        <tr>
          <td>
            <i class="login-icon el-icon-star-off"></i>给视频收藏点赞
          </td>
          <td>
            <i class="login-icon el-icon-s-promotion"></i>发表评论
          </td>
        </tr>
        <tr>
          <td>
            <i class="login-icon el-icon-s-help"></i>同步播放记录
          </td>
          <td>
            <i class="login-icon el-icon-video-camera-solid"></i>添加小伙伴一同看剧
          </td>
        </tr>
      </table>
      <el-button class="login-btn" type="primary" @click="centerDialogVisible = true" round>
        <span class="login-span">立即登录</span>
      </el-button>
      <table class="register">
        <tr>
          <td>
            <p>
              首次使用？
              <a href="/register" style="color:blue">点我注册</a>
            </p>
          </td>
        </tr>
      </table>

      <el-button slot="reference" circle>登录</el-button>
    </el-popover>

    <el-dialog title="欢迎登录" :visible.sync="centerDialogVisible" width="40%" :modal="modal" center>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="login-box"
        label-width="135px"
      >
        <el-form-item label="账号" prop="usercode">
          <el-input type="text" v-model="ruleForm.usercode"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" show-password></el-input>
        </el-form-item>

        <el-form-item label>
          <a href="register">注册</a>
          <el-divider direction="vertical"></el-divider>
          <a href="/findpwd">忘记密码</a>
          <el-divider direction="vertical"></el-divider>
          <el-checkbox v-model="checked">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button @click="centerDialogVisible=false">取消</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      modal: false, //这个为false，则弹出框后屏幕不会变暗
      checked: true,
      centerDialogVisible: false,
      ruleForm: {
        usercode: "41281376983",
        password: "123456uy",
        rememberme: false,
        type: []
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "账号位数应该是11位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.centerDialogVisible = false;
          this.axios({
            method: "post",
            params: {
              userCode: this.ruleForm.usercode,
              userPwd: this.ruleForm.password
            },
            url: "http://localhost:8090/user/login"
          })
            .then(r => {
              alert("token");
              alert(r.data.token);
              //下面这种书写方法会携带多余的双引号，造成后端的token验证不通过
              // window.localStorage["token"] = JSON.stringify(r.data.token);
              //传给后端的token才是正常的，没有多余的双引号
              window.localStorage.setItem(
                "token",
                JSON.parse(JSON.stringify(r.data.token))
              );

              this.$message({
                message: "登录成功",
                type: "success"
              });

              this.$router.push("/bindex");
              location.reload();
              // window.location.href = "http://localhost:8080/bindex";
            })
            .catch(error => {
              this.$message({
                showClose: true,
                message: error.response.data.message,
                type: "error"
              });
              this.centerDialogVisible = true;
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style   scoped>
.register {
  font-size: 16px;
  padding: 14px;
  padding-left: 28%;
  align-content: center;
  color: red;
}
.login-box {
  width: 85%;
}
.login-btn {
  height: 40px;
  width: 100%;
  display: block;
}
.login-span {
  font-size: large;
  font-weight: bolder;
  font-family: monospace;
  color: white;
}
.login-table {
  font-size: 14px;
  font-weight: inherit;
  width: 320px;
  height: 150px;
}
.login-icon {
  color: blue;
}
</style>